<template>
	<view class="content">
		<view class="contentbox" :style="'height:'+headHeight+'px;background-color: rgba(255, 255, 255, '+nums+')'">
			<view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
				<image :src="imageUrl +'wd.png'" mode="widthFix" class="logo"></image>
			</view>
		</view>
		<image :src="imageUrl +'bgimg.png'" mode="widthFix" class="bg-img"></image>
		<view class="nos" :style="'margin-top: '+headHeight+'px;'"></view>
		<view class="head-con">
			<view class="l-con" @click="goNext3()">
				<image v-if="userImg===''" :src="imageUrl +'user.png'" mode="widthFix" class="user-img"></image>
				<image v-if="userImg!==''" :src="userImg" mode="widthFix" class="user-img"></image>
				<view class="user-detail">
					<view class="user-con">
						<view v-if="username!==''">{{ username }}</view>
						<input v-if="username===''" v-model="nickname" type="nickname" name="nickname" @change="onNickName"
							placeholder="请输入用户名" />
						<image :src="imageUrl +'no.png'" mode="widthFix" class="next-img" v-if="false"></image>
					</view>
					<view class="tel" style="margin-top: 20rpx;">
						<button v-if="userImg===''" size="mini" open-type="chooseAvatar" @chooseavatar="onUserImg">
							设置头像
						</button>
					</view>
				</view>
			</view>
			<view class="r-con" v-if="false">
				<view>去绑定</view>
				<!-- <view>去认证</view> -->
				<image :src="imageUrl +'next.png'" mode="widthFix"></image>
			</view>
		</view>
		<view class="more" v-if="false">
			<view class="three">
				<view class="number">0</view>
				<view class="name">优惠券</view>
			</view>
			<view class="three">
				<view class="number">0.00</view>
				<view class="name">我的余额</view>
			</view>
			<view class="three" style="visibility: hidden">
				<view class="number">10</view>
				<view class="name">我的积分</view>
			</view>
		</view>
		<view class="cons" v-if="false">
			<view class="cons-box">
				<view class="pay" @click="goNext2('/pages/activation/activation')">
					<image :src="imageUrl +'s1.png'" mode="widthFix"></image>
					<view class="pay-name">
						<view class="pay-wx">无感快捷支付</view>
						<view class="pay-no">暂未开通</view>
					</view>
				</view>
				<view class="open">
					<view>去开通</view>
					<!-- <view>查看详情</view> -->
					<image :src="imageUrl +'next2.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="list-box">
			<view class="lixt-name" @click="goMenu">推荐工具</view>
			<view class="more-list">
				<view class="list-con" @click="goNext('/pages/vehiclemanagement/vehiclemanagement')">
					<image :src="imageUrl +'m1.png'" mode="widthFix"></image>
					<view>车辆管理</view>
				</view>
				<view class="list-con" @click="goNext('/pages/order/order-pay')">
					<image :src="imageUrl +'m2.png'" mode="widthFix"></image>
					<view>欠费补缴</view>
				</view>
				<view class="list-con" @click="goNext('/pages/myRenewRec/myRenewRec?kind=0')">
					<image :src="imageUrl +'m5.png'" mode="widthFix"></image>
					<view>月卡续费</view>
				</view>
				<view class="list-con" @click="goNext('/pages/myRenewRec/myRenewRec?kind=1')">
					<image :src="imageUrl +'m13.png'" mode="widthFix"></image>
					<view>错峰续费</view>
				</view>
				<view class="list-con" @click="goNext('/pages/electronicInvoice/electronicInvoice')">
					<image :src="imageUrl +'m3.png'" mode="widthFix"></image>
					<view>电子发票</view>
				</view>
				<view class="list-con" @click="tab('/pages/order/order')" v-if="false">
					<image :src="imageUrl +'m4.png'" mode="widthFix"></image>
					<view>我的账单</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/monthlycard/record')" v-if="false">
					<image :src="imageUrl +'m5.png'" mode="widthFix"></image>
					<view>我的月卡</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/myappeal/myappeal')" v-if="false">
					<image :src="imageUrl +'m6.png'" mode="widthFix"></image>
					<view>我的申诉</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/parkingReservation/parkingReservation')" v-if="false">
					<image :src="imageUrl +'m7.png'" mode="widthFix"></image>
					<view>我的预约</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/aboutUs/aboutUs')">
					<image :src="imageUrl +'m8.png'" mode="widthFix"></image>
					<view>关于我们</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/privacyProtection/privacyProtection')">
					<image :src="imageUrl +'m9.png'" mode="widthFix"></image>
					<view>隐私保护</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/nonDisclosureAgreement/nonDisclosureAgreement')">
					<image :src="imageUrl +'m10.png'" mode="widthFix"></image>
					<view>保密协议</view>
				</view>
				<view class="list-con" @click="goNext2('/pages/helpInstructions/helpInstructions')">
					<image :src="imageUrl +'m11.png'" mode="widthFix"></image>
					<view>帮助说明</view>
				</view>
				<view class="list-con" @click="goNext('/pages/contactcustomer/textinput')" v-if="false">
					<image :src="imageUrl +'m12.png'" mode="widthFix"></image>
					<view>联系客服</view>
				</view>
			</view>
		</view>
		<view class="foot-con">
			<view class="foot-name" @click="showLogin">退出登录</view>
			<!-- <view class="line">|</view>
      <view class="foot-name" @click="showLogout">注销账户</view> -->
		</view>
		<view class="black-alert" v-if="loginState">
			<view class="black-box">
				<view class="close">
					<image :src="imageUrl +'close.png'" mode="widthFix" @click="close"></image>
				</view>
				<view class="alert-name">是否退出登录</view>
				<view class="alert-anniu">
					<view class="alert-close" @click="confirm">取消</view>
					<view class="alert-success" @click="exitLogin">确认</view>
				</view>
			</view>
		</view>
		<view class="black-alert" v-if="logoutState">
			<view class="black-box">
				<view class="close">
					<image :src="imageUrl +'close.png'" mode="widthFix" @click="close"></image>
				</view>
				<view class="alert-name">是否注销账户</view>
				<view class="alert-anniu">
					<view class="alert-close" @click="confirm">取消</view>
					<view class="alert-success" @click="confirm">确认</view>
				</view>
			</view>
		</view>
		<view class="follow-container" v-if="false">
			<view class="avatar-wrap">
				<image :src="imageUrl +'logo.jpg'" class="avatar"></image>
			</view>
			<view class="follow-content">
				<text class="title">夷陵城市停车</text>
				<text class="remark">您关注后,我们才能及时为您服务，请关注</text>
			</view>
			<button class="follow-btn" @click="goToOfficialAccount">关注</button>
		</view>
		<view class="null"></view>
		<view class="foot">
			<image :src="imageUrl +'foot.png'" mode="widthFix" class="bgfoot-img"></image>
			<view class="foot-box">
				<view class="box-detail" @click="tab('/pages/index/index')">
					<image :src="imageUrl +'11.png'" mode="widthFix"></image>
					<view>首页</view>
				</view>
				<view class="box-detail" @click="tab('/pages/realTimeInfo/realTimeInfo')">
					<image :src="imageUrl +'2.png'" mode="widthFix"></image>
					<view>资讯</view>
				</view>
				<image :src="imageUrl +'5.png'" mode="widthFix" class="alone" @click="tab('/pages/parkingPlace/parkingList')">
				</image>
				<view class="box-detail" @click="tab('/pages/order/order')">
					<image :src="imageUrl +'3.png'" mode="widthFix"></image>
					<view>订单</view>
				</view>
				<view class="box-detail">
					<image :src="imageUrl +'44.png'" mode="widthFix"></image>
					<view class="choice-color">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from "../../api/myHttps";
	import myConfig from "../../api/myConfig";

	export default {
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				imageTop: 0,
				right: 0,
				loginState: false,
				logoutState: false,
				nums: 0,

				phone: '',
				username: '',
				nickname: '',
				userImg: '',
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20

			this.phone = uni.getStorageSync('phone') || '未登录';
			this.username = uni.getStorageSync('username') || '';
			this.userImg = uni.getStorageSync('userImg') || '';
		},
		methods: {
			onUserImg(e) {
				uni.uploadFile({
					url: myConfig.uni_app_web_api_url + '/city-settings/upImg',
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						'eulb': '0'
					},
					success: (res) => {
						this.userImg = JSON.parse(res.data).data;
						if (this.userImg === '') {
							console.log('return');
							return;
						}
						post('/city-mobile/eulbUserImg', {
							userImg: this.userImg,
							ownerId: uni.getStorageSync("ownerId"),
						}).then((res) => {
							console.log(res);
							uni.setStorageSync("userImg", this.userImg);
						})
					}
				})
			},
			onNickName() {
				if (this.nickname === '') {
					return;
				}
				post('/city-mobile/eulbUsername', {
					username: this.nickname,
					ownerId: uni.getStorageSync("ownerId"),
				}).then((res) => {
					this.username = this.nickname;
					uni.setStorageSync("username", this.username);
				})
			},
			goToOfficialAccount() {
				wx.navigateToMiniProgram({
					appId: 'wx5db3fd43b28f4c14', // 必填，公众号关联的小程序的 appId
					path: '', // 可选，打开的页面路径
					extraData: {
						// 可选，需要传递给目标小程序的数据
					},
					envVersion: 'release', // 可选，默认 'release'（正式版）
					success(res) {
						// 成功打开
						console.log('成功跳转到关联小程序', res);
					},
					fail(err) {
						// 失败
						console.error('跳转失败', err);
						wx.showToast({
							title: '跳转失败，请稍后重试',
							icon: 'none'
						});
					}
				});
			},
			goNext(uri) {
				this.sendEvent();
			
				let phone = uni.getStorageSync("phone");
				if (!phone) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: uri
				})
			},
			sendEvent() {
				const set = uni.getStorageSync("systemSet") || [];
				const getValue = key => {
					const item = set.find(i => i.keyword === key);
					return item ? item.dataValue : null;
				};
				const tmplIds = [
					getValue('applets_temp_in'),
					getValue('applets_temp_out'),
					getValue('applets_temp_arrear')
				].filter(id => id !== '');
				console.log('tmplIds', tmplIds);
			
				if (tmplIds.length) {
					uni.requestSubscribeMessage({
						tmplIds,
						success(res) {
							console.log(res);
						}
					});
				}
				// tmplIds: [
				//   'sWeRGQW01ggpeoFaKM9UnTf_QFN3gUSocyQGbvFkBvk',
				//   'Z-tnBbKBxZY_HVbpIFY-0ICZasJfRuaBzk7ZC5jZ6LI',
				// ],
			},
			goNext1(uri) {
				let phone = uni.getStorageSync("phone");
				console.log('phone', phone);
				if (!phone) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				uni.navigateTo({
					url: uri
				})
			},
			goMenu() {
				let phone = uni.getStorageSync("phone");
				if ('17610610359' === phone) {
					uni.navigateTo({
						url: '/pages/menu'
					})
				}
			},
			goNext2(uri) {
				uni.navigateTo({
					url: uri
				})
			},
			goNext3() {
				let phone = uni.getStorageSync("phone");
				if (!phone) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			close() {
				this.loginState = false
				this.logoutState = false
			},
			confirm() {
				this.loginState = false
				this.logoutState = false
			},
			exitLogin() {
				uni.setStorageSync("openid", null);
				uni.setStorageSync("ownerId", null);
				uni.setStorageSync("phone", null);
				uni.setStorageSync("username", null);
				uni.setStorageSync("userImg", null);
				this.loginState = false
				this.logoutState = false
				uni.navigateTo({
					url: '/pages/login/login'
				})
				
			},
			showLogin() {
				this.loginState = true
			},
			showLogout() {
				this.logoutState = true
			},
			go() {
				uni.navigateTo({
					url: '/pages/index2/index2'
				})
			},
			detail() {
				uni.navigateTo({
					url: '/pages/newsDetail/newsDetail'
				})
			},
			tab(e) {
				uni.switchTab({
					url: e
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 10) {
				console.log(111)
				this.nums = 1
			} else {
				this.nums = 0
				console.log(222)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}

	.bg-img {
		width: 750rpx;
		height: 520rpx;
		position: absolute;
		top: 0;
	}

	.contentbox {
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		transition: background-color 500ms;
		background-color: #ffffff00;

		.container {
			width: 750rpx;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 86rpx;

			.logo {
				margin-left: 40rpx;
				width: 90rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}

			.seandcode {
				width: 64rpx;
				height: 64rpx;
				position: relative;
				z-index: 9999;
			}
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.head-con {
		width: 690rpx;
		position: relative;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.l-con {
			display: flex;
			align-items: center;

			.user-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 1px solid #fff;
			}

			.user-detail {
				margin-left: 20rpx;

				.user-con {
					display: flex;
					align-items: center;

					view {
						font-size: 36rpx;
						color: #1C274C;
					}

					image {
						width: 110rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}

				.tel {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: rgba(40, 40, 40, 0.6);
				}
			}
		}

		.r-con {
			width: 136rpx;
			height: 48rpx;
			margin-top: 20rpx;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, #00BBFF, #5ADA7A);

			view {
				font-size: 24rpx;
				color: #FFFFFF;
				margin-right: 10rpx;
			}

			image {
				width: 14rpx;
				height: 14rpx;
			}
		}
	}

	.more {
		width: 670rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
		position: relative;

		.three {
			width: 180rpx;

			.number {
				width: 100%;
				text-align: center;
				font-size: 48rpx;
				color: #1C274C;
			}

			.name {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #1C274C;
				margin-top: 10rpx;
			}
		}
	}

	.cons {
		width: 690rpx;
		height: 160rpx;
		border-radius: 20rpx;
		background: linear-gradient(to right, #00BBFF, #5ADA7A);
		margin-top: 40rpx;
		position: relative;

		.cons-box {
			width: 640rpx;
			margin-top: 30rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pay {
				display: flex;
				align-items: center;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				.pay-name {
					margin-left: 30rpx;

					.pay-wx {
						font-size: 36rpx;
						color: #fff;
					}

					.pay-no {
						font-size: 24rpx;
						color: #fff;
						margin-top: 12rpx;
					}
				}
			}

			.open {
				padding: 0 20rpx;
				height: 48rpx;
				margin-top: 20rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;

				view {
					font-size: 24rpx;
					color: #24A7CE;
					margin-right: 10rpx;
				}

				image {
					width: 14rpx;
					height: 14rpx;
				}
			}
		}

	}

	.list-box {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		margin-top: 40rpx;

		.lixt-name {
			font-size: 32rpx;
			color: #1C274C;
			margin-top: 20rpx;
			margin-left: 20rpx;
			font-weight: 700;
		}

		.more-list {
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 30rpx;

			.list-con {
				width: 25%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-top: 30rpx;

				image {
					width: 90rpx;
					height: 90rpx;
				}

				view {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #1C274C;
				}
			}
		}
	}

	.foot-con {
		width: 100%;
		margin-top: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.foot-name {
			font-size: 28rpx;
			color: rgba(40, 40, 40, 0.6);
		}

		.line {
			font-size: 24rpx;
			color: rgba(40, 40, 40, 0.6);
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
	}

	.null {
		width: 750rpx;
		height: 220rpx;
	}

	.foot {
		width: 750rpx;
		height: 198rpx;
		position: fixed;
		bottom: 0;

		.bgfoot-img {
			width: 750rpx;
			height: 198rpx;
		}

		.foot-box {
			width: 650rpx;
			height: 94rpx;
			position: absolute;
			top: 60rpx;
			left: 50rpx;
			display: flex;
			justify-content: space-between;

			.alone {
				width: 100rpx;
				height: 100rpx;
				margin-top: -20rpx;
			}

			.box-detail {
				width: 90rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					font-size: 22rpx;
					color: rgba(40, 40, 40, 0.6);
					line-height: 36rpx;
					margin-top: 10rpx;
					width: 100%;
					text-align: center;
				}

				.choice-color {
					color: #1C274C !important;
				}
			}
		}
	}

	.black-alert {
		width: 750rpx;
		height: 100%;
		position: fixed;
		background-color: rgba(28, 39, 76, 0.60);
		top: 0;
		z-index: 66666666;
		display: flex;
		justify-content: center;
		align-items: center;

		.black-box {
			width: 640rpx;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #FFEDEF, #F2F9FB, #FFFFFF);
			padding-bottom: 60rpx;

			.close {
				width: 100%;
				display: flex;
				justify-content: flex-end;

				image {
					width: 18rpx;
					height: 18rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
				}
			}


			.alert-name {
				width: 100%;
				text-align: center;
				line-height: 60rpx;
				color: #1C274C;
				font-size: 32rpx;
				margin-top: 40rpx;
				font-weight: 600;
			}

			.alert-anniu {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 40rpx;

				.alert-close {
					width: 184rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(36, 167, 206, 0.1);
					font-size: 32rpx;
					border-radius: 50rpx;
					color: #24A7CE;
					margin-right: 10rpx;
				}

				.alert-success {
					width: 184rpx;
					height: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #FF2C41;
					font-size: 32rpx;
					border-radius: 50rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
			}
		}
	}


	.follow-container {
		position: fixed;
		bottom: 100px;
		left: 0;
		right: 0;
		background-color: white;
		border-top: 1px solid #eee;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* 垂直居中 */
		width: 100%;
		box-sizing: border-box;
	}

	.left-side {
		display: flex;
		flex-direction: column;
		/* 让 title 和 remark 垂直排列 */
		align-items: flex-start;
		/* 左对齐 */
		gap: 8rpx;
		/* 行间距 */
		flex: 1;
		/* 占据剩余空间 */
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 15rpx;
		margin-bottom: 5rpx;
		/* 避免与文字贴太紧 */
	}

	.follow-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0 20rpx;
		/* 给两边留出空隙 */
	}

	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin: 0;
	}

	.remark {
		font-size: 24rpx;
		color: #888;
		margin: 0;
		line-height: 1.4;
	}


	.follow-btn {
		background-color: #007AFF;
		color: white;
		border-radius: 20rpx;
		padding: 8rpx 20rpx;
		font-size: 26rpx;
		line-height: 1.2;
		border: none;
		min-width: 80rpx;
		width: 120rpx;
	}
</style>